<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <div class="banner-l">
        <img src="../images/banner.4994397e.jpg" alt="">
    </div>
    <div class="banner-r">
        <h1>欢迎来到注册界面</h1>
        <div class="banner-r-c">
            用户名：<input name="userName" type="text" placeholder="请输入用户名">
            密码：<input name="pwd1" type="password" placeholder="请输入密码">
            确认密码：<span name="pwdSpan"></span><input name="pwd2" type="password" placeholder="请再次输入密码">
            验证码：<span name="sc"></span><a href="javascript:;" class="scReset">看不清换一个</a><input name="vc1" type="text"
                placeholder="请输入验证码">
            <button class="login">注册</button> <br>
            <a href="">忘记密码？</a>
            <a href="">手机号登录</a>
            <p name="vcp"></p>
            <p name="comment"></p>
        </div>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>

    <script>
        $('[name="sc"]').html(setVC()).click(function () { $(this).html(setVC()) });
        $('[name="scReset"]').click(function () { $('[name="sc"]').html(setVC()) });
        $('button').click(function () {
            let name = $('[name="userName"]').val();
            let pwd1 = $('[name="pwd1"]').val();
            let pwd2 = $('[name="pwd2"]').val();
            let vc1 = $('[name="vc1"]').val();
            let vc2 = $('[name="sc"]').html();

            if (pwd1 !== pwd2) {
                $('[pwdSpan]').html('您两次输入的密码不正确').css('color', 'red');
                return;
            } else {
                $('[pwdSpan]').html('');

            }

            if (vc1.toLowerCase !== vc2.toLowerCase) {
                $('[name="vcp"]').html('您输入的验证码有误').css('color', 'red');
                $('[name="sc"]').html(setVC());
                return;
            } else {
                $('[name="vcp"]').html('');
            }

            $('[name="sc"]').html(setVC());

            const xhr = myPromiseJQueryAjax('../server/goods_reg.php', 'post', { userName: name, userPwd: pwd2 }, 'json');
            xhr.then(function (res) {
                if (res.result === 0) {
                    $('[name="comment"]').html('注册失败，您的账号重复了').css('color', 'red');
                    return;
                } else if (res.result === 1) {
                    let time = 5;
                    $('[name="comment"]').html(`恭喜您注册成功，将在${time}秒后跳转到登录页面`).css('color', 'red');
                    setInterval(function () {
                        time--;
                        if (time === 0) {
                            window.location.href = './login.html';
                            return;
                        }
                        $('[name="comment"]').html(`恭喜您注册成功，将在${time}秒后跳转到登录页面`).css('color', 'red');
                    }, 1000)
                    
                }
            })
        })
    </script>
</body>

</html>